<template>
  <div class="card2 head2">
    <el-tabs v-model="activeName" v-if="txt === '宜'">
      <el-tab-pane :label="'日' + txt" :name="'日' + txt">
        <div
          class="p-2  border-solid border-white border-2 h-28 w-full"
          style="
            display: flex;
            flex-wrap: wrap;
            padding-top: 10px;
            padding-right: 10px;
            padding-left: 10px;
            overflow-y: auto;
            background-image: url('https://zt-1304966785.cos.ap-nanjing.myqcloud.com/ryi.png');
            background-size: 100%;
            border-radius: 15px;
          "
        >
          <div
            v-for="o in callGrandparentMethod(d.value.ryilist)"
            v-bind:key="o"
            class="h-6 m-1 p-1 bg-green-500 text-white text-xs whitespace-nowrap text-center border-solid border-white"
          >
            {{ o }}
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="'时' + txt" :name="'时' + txt">
        <div
          class="p-2 margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-28 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
          style="
            display: flex;
            flex-wrap: wrap;
            padding-top: 10px;
            padding-right: 10px;
            padding-left: 10px;
            overflow-y: auto;
            background-image: url('https://zt-1304966785.cos.ap-nanjing.myqcloud.com/syi.png');
            background-size: 100%;
            border-radius: 15px;
          "
        >
          <div
            v-for="o in callGrandparentMethod(d.value.syilist)"
            v-bind:key="o"
            class="h-6 m-1 p-1 bg-green-500 text-white text-xs whitespace-nowrap text-center border-solid border-white"
          >
            {{ o }}
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-tabs v-model="activeName" v-else>
      <el-tab-pane :label="'日' + txt" :name="'日' + txt">
        <div
          class="p-2 margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-28 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
          style="
            display: flex;
            flex-wrap: wrap;
            padding-top: 10px;
            padding-right: 10px;
            padding-left: 10px;
            overflow-y: auto;
            background-image: url('https://zt-1304966785.cos.ap-nanjing.myqcloud.com/rji.png');
            background-size: 100%;
            border-radius: 15px;
          "
        >
          <div
            v-for="o in callGrandparentMethod(d.value.rjilist)"
            v-bind:key="o"
            class="h-6 m-1 p-1 bg-red-500 text-white text-xs whitespace-nowrap text-center border-solid border-white"
          >
            {{ o }}
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="'时' + txt" :name="'时' + txt">
        <div
          class="p-2 margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-28 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
          style="
            display: flex;
            flex-wrap: wrap;
            padding-top: 10px;
            padding-right: 10px;
            padding-left: 10px;
            overflow-y: auto;
            background-image: url('https://zt-1304966785.cos.ap-nanjing.myqcloud.com/sji.png');
            background-size: 100%;
            border-radius: 15px;
          "
        >
          <div
            v-for="o in callGrandparentMethod(d.value.sjilist)"
            v-bind:key="o"
            class="h-6 m-1 p-1 bg-red-500 text-white text-xs whitespace-nowrap text-center border-solid border-white"
          >
            {{ o }}
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue';

const props = defineProps({
  d: Object,
  txt: String,
  img: String,

  colorClass: {
    type: String,
    default: 'text-white', // Set default value for paddingClass
  },
});
const { d, txt } = toRefs(props);
const activeName = ref(`日${txt.value}`);
const sortByLength = inject('sortByLength');
const callGrandparentMethod = (array) => {
  if (sortByLength) {
    return sortByLength(array); // Call the grandparentMethod
  }
};
</script>
<style scoped lang="less">
.head2 {
  width: 100%;
  height: 100%;
  --s: 17px;
  /* control the size */

  --c: #0000, #282828 0.5deg 119.5deg, #0000 120deg;
  --g1: conic-gradient(from 60deg at 56.25% calc(425% / 6), var(--c));
  --g2: conic-gradient(from 180deg at 43.75% calc(425% / 6), var(--c));
  --g3: conic-gradient(from -60deg at 50% calc(175% / 12), var(--c));
  background: var(--g1), var(--g1) var(--s) calc(1.73 * var(--s)), var(--g2), var(--g2) var(--s) calc(1.73 * var(--s)),
    var(--g3) var(--s) 0, var(--g3) 0 calc(1.73 * var(--s)) #1e1e1e;
  background-size: calc(2 * var(--s)) calc(3.46 * var(--s));
}
</style>
